<template>
  <div class="tags-view">
    <el-tag :closable="checkClosable(tag)"
            size="large"
            effect="plain"
            round
            @close="handleTagClose(tag)"
            v-for="tag in visitedViews">
      {{tag.name}}
    </el-tag>
  </div>
</template>

<script setup lang="ts">

import {TagViewStore} from "@/store/TagsStore.ts";
import router from "@/router/router.ts";
import {TagData} from "@/type/TagData.ts";

const tagsStore = TagViewStore()

const visitedViews = tagsStore.visitedViews

const checkClosable = (tag: TagData) =>{

  return tag.name != 'dashboard';


}

const handleTagClose = (tag: TagData) => {
  tagsStore.delView(tag)

  const lastView: TagData = tagsStore.visitedViews.slice(-1)[0];

  if (lastView){
    router.push(lastView);
  }else {
    router.push({name: 'dashboard'})
  }
}
</script>

<style scoped>

</style>